<template>
  <span class="date-range-picker">
    <a-date-picker
      v-model="startDate"
      placeholder="开始时间"
      :disabled-date="disabledStartDate"
      :show-time="showTime?{ defaultValue: moment('00:00:00', 'HH:mm:ss') }:false"
      @openChange="startOpenChange"
      @change="onChange"
    />
    <span class="line">-</span>
    <a-date-picker
      v-model="endDate"
      placeholder="结束时间"
      :disabled-date="disabledEndDate"
      :show-time="showTime?{ defaultValue: this.moment('23:59:59', 'HH:mm:ss') }:false"
      :open="endOpen"
      @openChange="endOpenChange"
      @change="onChange"
    />
  </span>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      moment,
      endOpen: false,
      startDate: null,
      endDate: null
    }
  },
  // props: Object.assign({}, Date.props, {
  props: {
    showTime: [Boolean, Object],
    placeholder: [String, Array],
    value:{
      type: Array,
      default() {
        return []
      }
    }
  },
  // }),
  // watch: {
  //   loading: {
  //     handler(bool) {
  //       this.$emit('queryMethod', bool)
  //     },
  //     // 代表在wacth里声明了这个方法之后立即先去执行handler方法
  //     immediate: true,
  //     deep: true
  //   }
  // },
  methods: {
    disabledStartDate(startValue) {
      // console.log(startValue)
      const endValue = this.endDate //this.moment(this.endDate)
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    disabledEndDate(endValue) {
      const startValue = this.startDate //this.moment(this.startDate)
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    startOpenChange(open) {
      console.log(open)
      if (!open) {
        this.endOpen = true
      }
    },
    endOpenChange(open) {
      console.log(open)
      this.endOpen = open
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  },
  model:{
    prop: 'value',
    event: 'change'
  }
}
</script>
<style lang="less" scoped>
.date-range-picker {
  width: 400px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
